<template>
	<view>
		<view class="content">
			<view class="">
				<view style="color: #101010; font-size: 28rpx;margin-bottom: 30rpx;">
					上传生活照
				</view>
			</view>
			<view style="display: flex; align-items: center;flex-wrap: wrap;">
				<view v-for="(item,index) in form.pic" :key="index" style="width: 160rpx;height: 160rpx;margin: 10rpx 15rpx 15rpx 0;">
					<image class="img" :src="item" mode=""></image>
				</view>
				<view class="" @click="tx" style="width: 160rpx;height: 160rpx;border: 1rpx dashed #C8C7CC;display: flex;align-items: center; justify-content: center;">
					<image src="../../static/jia_img.png" style="width: 40rpx; height: 40rpx;"></image>
				</view>
			</view>
		</view>
		<view class="btn">
			<!-- <view class="dl" @click="del" v-if="btn">
				<view class="dlll">
					删除
				</view>
			</view> -->
			<view class="dl" @click="baocun">
				<view class="dll">
					保存
				</view>
			</view>
			<!-- <view class="dl" @click="xgg" v-if="btn">
				<view class="dll">
					修改
				</view>
			</view> -->
		</view>
		<image-picker :hide="true" ref="imgPicker" :count="9" @success="upSuccess"></image-picker>
	</view>
</template>

<script>
	import ImagePicker from '@/components/image-picker.vue';
	export default{
		components: {
			ImagePicker
		},
		data(){
			return{
				form:{
					pic:[]
				},
				pic:''
			}
		},
		methods:{
			async baocun() {
				this.pic=this.form.pic.toString()
				console.log(this.pic)
				const res = await this.post('/Index/User/save_user_resuem_pic',{pic:this.pic});
				console.log(res)
				if(res.code==200){
					uni.showToast({
						title:'添加成功',
						duration:1000,
						icon:'none',
						success() {
							uni.navigateBack({
								
							})
						}
					})
				}
			},
			tx() {
				this.$refs.imgPicker.ChooseImage()
			},
			upSuccess(res) {
				console.log(res.file)
				// 选择完成图片回调返回 res.file 就是上传成功后端返回来的图片路径
				this.form.pic.push(res.file);
			
				// this.editData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 10rpx;
		.dl {
			width: 100%;
			padding: 30rpx;
			.dll {
				width: 100%;
				height: 90rpx;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
				border-radius: 15rpx;
				background-color: #3291F8;
				border: 1rpx solid #3291F8;
			}
			.dlll{
				width: 100%;
				height: 90rpx;
				color: #ff0000;
				line-height: 90rpx;
				text-align: center;
				border-radius: 15rpx;
				background-color: #FFFFFF;
				border: 1rpx solid #ff0000;
			}
		}
	}
	
	.img{
		width: 100%;
		height: 100%;
		display: block;
	}
	.content {
		width: 100%;
		margin-top: 38rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 24rpx 20rpx 24rpx 30rpx;
	}
	page{
		background: #EDF1F2;
	}
</style>
